<transition :name="transitionName">
    <cs-page class="cs-teacher" :class="{ 'top-layer':topLayer }">
        <cs-header title="FormComponents">
            <router-link to="/Main" slot="left">
                <cs-button icon="fa fa-chevron-left">Back</cs-button>
            </router-link>
        </cs-header>
        <cs-contenter>
            <div class="section-container">
                <h1><i class="fa fa-cube"></i>FormComponents</h1>
            </div>
            <div class="cs-cell-group">
                <cs-cell title="Tab" is-link to="/Main/FormComponents/Tab"></cs-cell>
                <cs-cell title="LoadMore" is-link to="/Main/FormComponents/LoadMore"></cs-cell>
                <cs-cell title="Switch" is-link to="/Main/FormComponents/Switch"></cs-cell>
                <cs-cell title="CheckList" is-link to="/Main/FormComponents/CheckList"></cs-cell>
                <cs-cell title="Field" is-link to="/Main/FormComponents/Field"></cs-cell>
                <cs-cell title="标题文字" to="//www.baidu.com" is-link value="带链接"></cs-cell>
                <cs-cell title="标题文字" icon="fa fa-tasks" value="带 icon"></cs-cell>
                <cs-cell title="标题文字">
                    <cs-switch></cs-switch>
                </cs-cell>
                <cs-cell title="标题文字" is-link>
                    <span style="color: green">这里是元素</span>
                </cs-cell>
                <cs-cell title="标题" label="描述信息" is-link></cs-cell>
            </div>
        </cs-contenter>
    </cs-page>
</transition>